{% extends 'site.html' %}
{% load static %}
{% block site_main %}
    {% csrf_token %}
    <style>


        .diggit {
            float: left;
            width: 46px;
            height: 52px;
            background: url({% static 'image/blog/upup.gif' %}) no-repeat;
            text-align: center;
            cursor: pointer;
            margin-top: 2px;
            padding-top: 5px;
        }

        .buryit {
            float: right;
            margin-left: 20px;
            width: 46px;
            height: 52px;
            background: url({% static 'image/blog/downdown.gif' %}) no-repeat;
            text-align: center;
            cursor: pointer;
            margin-top: 2px;
            padding-top: 5px;
        }

        .burynum {
            font-size: 14px;
            color: #075db3;
            font-family: Verdana;
        }

        .clear {
            clear: both;
        }

        .diggword {
            margin-top: 5px;
            margin-left: 20px;
            font-size: 12px;
            color: #ffa600;
        }
    </style>
    <div class="media">

        <div>
            <div class="media-heading pull-right">
                随笔 - {{ article_data_obj.count }} 点赞数 - {{ article_obj.up_num }} 点踩数
                - {{ article_obj.down_num }}
                评论数 - {{ article_obj.comment_num }}
            </div>
            <br>
            <div class="media-title">
                <h4> {{ article_obj.title }}</h4>
            </div>
            <hr>
            <div class="media-body">
                {# 看到页面上的效果是页面源码 带标签的页面源码 而不是 页面 #}
                {# 两种解决办法 : 一种是在前端加转换器 |safe  另一种是在后端你直接对源代码 进行 mark_safe  #}
                {{ article_obj.content|safe }}
            </div>
            {# 点赞点踩区域#}
            <div class="clearfix">
                <div class="pull-right">
                    <div class="media-bottom">
                        {#            去copy别人写好的点赞点踩样式#}
                        <div class="diggit" onclick="votePost({{ article_obj.pk }},'Digg')">
                            <span class="diggnum" id="digg_count">{{ article_obj.up_num }}</span>
                        </div>
                        <div class="buryit" onclick="votePost({{ article_obj.pk }},'Bury')">
                            <span class="burynum" id="bury_count">{{ article_obj.down_num }}</span>
                        </div>
                        <div class="clear"></div>
                        <div class="diggword" id="digg_tips">
                        </div>

                    </div>


                </div>
            </div>
            {# 点赞点踩区域#}

            {#            渲染评论#}
            <h4 style="font-size: 16px;font-weight: bold">评论列表</h4>
            {% for comment_obj in comment_data_all %}
                <div class="media">

                    <hr>
                    <div class="media-heading">
                        #{{ forloop.counter }}楼&nbsp;&nbsp;{{ comment_obj.update_time|date:'Y-m-d H:i:s' }}&nbsp;<a
                            href="">{{ comment_obj.user.username }}</a>
                        <p class="pull-right" style="color: #0033bc">
                            <a href="">回复</a>
                            &nbsp; <a href="">引用</a>
                        </p>
                    </div>
                    <br>
                    <div class="media-body">
                        {{ comment_obj.content }}

                    </div>
                </div>
            {% endfor %}
            <br>
            <hr>
            {# 评论区域#}
            {#            需要登录之后才能发表评论#}
            {% if request.user.is_authenticated %}
                <div class="media">
                    <div class="media-heading"
                         style="font-size: 16px;font-family:'sans-serif';color:#0033bc;font-weight: bold">
                        发表评论:
                    </div>
                    <div class="media-body">
                        <textarea name="" id="comment_content" cols="30" rows="10" class="form-control"></textarea>
                    </div>

                    <button class="btn btn-success pull-right" id="submit_comment" style="margin-top: 10px">提交评论
                    </button>
                </div>
            {% endif %}


        </div>
    </div>
    <script>
        //
        function votePost(article_id, tag) {
            let numEle = "#" + tag.toLowerCase() + "_count"
            let tipEle = $("#digg_tips");
            {#区分tag是点赞还是点踩#}
            let data = {
                'article_id': article_id,
                {#三元表达式#}
                'up_or_down': 1 ? tag === "Digg" : 0,
                "csrfmiddlewaretoken": "{{ csrf_token }}",
            }
            $.ajax({
                    {#因为向某一个路由地址发解析#}
                    url: '{% url 'up_down' %}',
                    type: 'POST',
                    data: data,
                    success: (response) => {
                        if (response.code === 2000) {
                            {#让当前点赞数或者点踩数+1#}
                            $(numEle).text(parseInt($(numEle).text()) + 1)
                            tipEle.text(response.message)
                        } else {
                            tipEle.text(response.errors)
                            {#$(numEle).text(parseInt($(numEle).text()) - 1)#}
                        }


                    }

                }
            )

        }

        {#评论点击事件#}
        $("#submit_comment").click(function () {
            let content = $("#comment_content").val();
            $.ajax({
                url: "{% url 'comment' %}",
                type: "POST",
                data: {
                    "article_id":{{ article_obj.pk }},
                    "content": content,
                    "csrfmiddlewaretoken": "{{ csrf_token }}",
                },
                {#回调函数内容#}
                success: (response) => {
                    window.location.reload()
                }
            })
        })
    </script>
{% endblock %}